<template>
	<view class="item-main">
		<view class="item-center" @click="toPage('/pages/details/merchantService/merchantService?id='+item.id)">
			<view class="acea-row">
				<img class='item-img' :src="item.image?item.image.split(',')[0]:''" alt="">
				<view class="content-main ">
					<p>{{ item.title }}</p>
					<p>服务类别：{{ item.typeName }}</p>
					<p>服务区域：{{ item.area }}</p>
					<p>服务金额：{{ item.price }}元</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default{
		props:['item'],
		data(){
			return{
				isWidth:0
			}
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})
			
		},
		methods:{
			toPage,
			publish() {
				this.item.type = 4
				let item = JSON.stringify(this.item)
				wx.navigateTo({
					url:'/pages/releases/offeraRreward/offeraRreward?item='+item
				})
			},
		}
	}
</script>

<style lang="scss">
	.item-main{
		padding-bottom: 36rpx;
		background-color: #ffffff;
		margin: 0rpx 28rpx;
		border-radius: 2rpx;
		padding: 0rpx 24rpx 0rpx 28rpx;
		.item-top{
			// margin: 0rpx 24rpx 0rpx 28rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;
			.left{
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}
			.right{
				border-radius: 10rpx;
				background-color: rgb(238, 33, 45);
				color: rgba(255, 255, 255, 1);
				font-size: 24rpx;
				width: 122rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.item-center{
			display: flex;
			justify-content: space-between;
			margin-top: 36rpx;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
			.acea-row{
				display: flex;
				align-items: center;
				.item-img{
					width: 170rpx;
					height: 144rpx;
					border-radius: 10rpx;
					margin-right: 18rpx;
				}
				.content-main{
					font-size: 24rpx;
					font-weight: 400;
					line-height: 20px;
					color: rgba(128, 128, 128, 1);
					width: 356rpx;
					p{
						margin: 0;
						padding: 0;
					}
				}
			}
			span{
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}
		}
		.item-bottom{
			p{
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(166, 166, 166, 1);
			}
			.bottom-btn{
				padding-bottom: 36rpx;
				margin-top: 18rpx;
				display: flex;
				justify-content: space-between;
				span{
					font-size: 24rpx;
					color: rgba(128, 128, 128, 1);
					width: 90rpx;
					line-height: 44rpx;
					border-radius: 4rpx;
					border: 2rpx solid rgba(229, 229, 229, 1); 
					display: flex;
					justify-content: center;
				}
			}
		}
	}
	
</style>